<!--
 * @Author: Bennent_G
 * @Date: 2024-12-23 16:14:13
 * @LastEditTime: 2025-01-17 11:07:31
 * @Description: dictionary module view
-->

<template>
	<!-- 检索 -->
	<a-collapse class="page-header-container mb-16" v-model:activeKey="activeKey" :bordered="false">
		<a-collapse-panel key="1" header="搜索">
			<a-form layout="inline" :model="searchForm">
				<a-form-item label="字典CODE">
					<a-input v-model="searchForm.nickName" placeholder="请输入" />
				</a-form-item>
				<a-form-item label="字典名称">
					<a-input v-model="searchForm.mobile" placeholder="请输入" />
				</a-form-item>
				<a-form-item label="字典状态">
					<a-select v-model="searchForm.sex" placeholder="请选择">
						<a-select-option value="">全部</a-select-option>
						<a-select-option value="1">正常</a-select-option>
						<a-select-option value="0">禁用</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item>
					<a-button type="primary" :icon="h(SearchOutlined)">搜索</a-button>
				</a-form-item>
			</a-form>
		</a-collapse-panel>
	</a-collapse>
	<!--  -->
	<div class="page-container">
		<div class="table-operations">
			<div class="table-header-title">字典列表</div>
			<a-button type="primary" @click="openModal('add')">创建字典</a-button>
		</div>
		<a-divider />
		<a-table :row-selection="rowSelection" :columns="columns" :data-source="data">
			<template #bodyCell="{ record, column }">
				<template v-if="column.key === 'structure'">
					{{ record.structure === 'tree' ? '树形' : '平级' }}
				</template>
				<template v-if="column.key === 'items'">
					<a-popover placement="bottom">
						<template #content>
							<div class="sub-header">
								字典项信息
							</div>
							<a-divider />
							<a-table :data-source="record.items">
								<a-table-column key="name" data-index="name" width="240">
									<template #title>字典项值</template>
								</a-table-column>
								<a-table-column key="value" data-index="value" width="240">
									<template #title>字典项名称</template>
								</a-table-column>
								<a-table-column key="desc" data-index="desc" width="240">
									<template #title>字典项描述</template>
								</a-table-column>
								<a-table-column width="260">
									<template #title>操作</template>
									<a-button type="text" primary size="small">编辑</a-button>
									<a-button type="text" danger size="small">删除</a-button>
								</a-table-column>
							</a-table>
						</template>
						<span style="color:green">{{ record.items.length }}</span>项
					</a-popover>
				</template>
				<template v-if="column.key === 'status'">
					<a-switch :checked="record.status" checked-value="1" un-checked-value="0"
						@change="(checked: string | number) => handleStatus(checked, record)">
						<template #checkedChildren>正常</template>
						<template #unCheckedChildren>禁用</template>
					</a-switch>
				</template>
				<template v-if="column.key === 'options'">
					<a-space :size="8">
						<a-button size="small" @click="openModal('edit', record.id)">编辑</a-button>
						<a-popconfirm title="确认删除吗?" ok-text="确认" cancel-text="取消" @confirm="handleDelete(record.id)">
							<a-button type="primary" danger size="small">删除</a-button>
						</a-popconfirm>
					</a-space>
				</template>
			</template>
		</a-table>
	</div>

	<!-- 用户表单弹窗 -->
	<DictionaryFormModal v-model="visible" :title="title" :id="currentId" />
	<!--  -->
	<contextHolder />
</template>

<script setup lang="ts">
import { ref, createVNode, h, onMounted } from 'vue';
import { type TableColumnType, Modal, TableProps } from 'ant-design-vue';
import { ExclamationCircleOutlined, SearchOutlined } from '@ant-design/icons-vue';
import { useCustomNotification } from "@/hooks/common/useCustomNotification";
import type { AnyObject } from "@/views/global";
import { fetchDictionary } from "@/apis/admin/setting";
import DictionaryFormModal from "@/components/admin/dictionary/DictionaryFormModal.vue";

interface DictionaryItem {
	name: string;
	value: string;
	desc: string;
}

interface Dictionary {
	id: number;
	code: string;
	name: string;
	type: string;
	structure: string;
	description: string;
	status: string;
	items: DictionaryItem[];
}

const columns: typeof TableColumnType[] = [
	{
		title: '序号',
		dataIndex: 'index',
		key: 'index',
		align: 'center',
		width: 80,
		customRender: ({ index }) => `${index + 1}`,
	},
	{
		title: '字典CODE',
		dataIndex: 'code',
		key: 'code',
		align: 'center'
	},
	{
		title: '字典名称',
		dataIndex: 'name',
		key: 'name',
		align: 'center'
	},
	{
		title: '字典类型',
		dataIndex: 'type',
		key: 'type',
		align: 'center'
	},
	{
		title: '字典结构',
		dataIndex: 'structure',
		key: 'structure',
		align: 'center'
	},
	{
		title: '字典项',
		dataIndex: 'items',
		key: 'items',
		align: 'center'
	},
	{
		title: '字典描述',
		dataIndex: 'description',
		key: 'description',
		align: 'center'
	},
	{
		title: '状态',
		dataIndex: 'status',
		key: 'status',
		align: 'center'
	},
	{
		title: '操作',
		key: 'options',
		align: 'center'
	}
];
const data = ref<Dictionary[]>();

const getDictionaryData = () => {
	fetchDictionary<Dictionary[]>().then((res) => {
		data.value = res.data;
	});
};
onMounted(() => {
	getDictionaryData();
});

const rowSelection: TableProps['rowSelection'] = {
	onChange: (selectedRowKeys: string[], selectedRows: DataType[]) => {
		console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
	},
	getCheckboxProps: (record: DataType) => ({
		disabled: record.name === 'Disabled User', // Column configuration not to be checked
		name: record.name,
	}),
};
// search
const activeKey = ref<string[]>(['1']);
const searchForm = ref<AnyObject>({
	nickName: '',
	sex: '',
	status: '',
	mobile: ''
});

// 通知
const { contextHolder, openNotifation } = useCustomNotification();

// 状态切换
const handleStatus = (checked: string | number, record: AnyObject) => {
	Modal.confirm({
		title: "提示",
		icon: createVNode(ExclamationCircleOutlined),
		content: `确认${checked === '1' ? '启用' : '禁用'}用户吗？`,
		okText: '确认',
		cancelText: '取消',
		onOk() {
			//  #TODO: API调用
			record.status = checked.toString();
		},
		onCancel() {
			record.status = !checked.toString();
		},
	});
};

// 删除
const handleDelete = (record: AnyObject) => {
	console.log(record);
	// #TODO:  API调用
	openNotifation({
		type: 'success',
		message: '删除成功',
	});
};

const visible = ref<boolean>(false);
const title = ref<string>('');
const currentId = ref<number | string>(0);
const openModal = (type: string, id?: number | string | undefined) => {
	title.value = type === 'add' ? '新增数据字典' : '编辑数据字典';
	currentId.value = id || 0;
	visible.value = true;
};

</script>

<style scoped lang="scss">
.page-header-container {
	background-color: var(--base-background-color);
	.ant-select {
		width: 180px;
	}
}

.table-operations {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.table-header-title {
		font-size: 18px;
	}
}

.ant-divider {
	margin: 8px 0;
}

.sub-header {
	padding-left: 16px;
	border-left: 4px solid #2db7f5;
}
</style>
